<!--订阅按钮弹层-->
<div class="follow_btn" id="follow_btn">
    <div>
        <div class="bor">
            <span myAttr = '0' class="" id="radiuOne"></span>
        </div>
        正向订阅
    </div>
    <div></div>
    <div>
        <div class="bor">
            <span myAttr = '1' class="" id="radiuTwo"></span>
        </div>
        反向订阅
    </div>
    <div>
        <div class="squar">
            <input type="checkbox" value="None" id="squar" name="check" />
            <label for="squar" id="squar">
                <span></span>
            </label>
        </div>
        <span>我已阅读并同意<a href="{{url('/agree')}}">《订阅协议》</a></span>
    </div>
    <div>
        <span onclick="cancle();">取消</span>
        <span onclick="sure(this);">确定</span>
    </div>
    <!--取消订阅-->
    <div class="cancel_follow" id="gendancancle" onclick="follow(0,0,this);" style="display: none">
        取消订阅
    </div>
</div>


<script>
    var bdlists = "{{ url('/bdlists') }}";
    var analyst_username = '';
    var gotofllow = "{{url('/fllow')}}";
    var status    = 3;//是否订阅
    var direction = 3;//订阅方向
    var gotologin = "{{url('/mlogin')}}";
    //订阅按钮
   

    //移除确定和取消按钮点击事件
    function cancle(){
        $('.follow_btn').hide();
//        window.setTimeout(window.location.reload(),2000);
    }
    // 确定按钮
    function sure(obj){
        var eleAttr1 = $('#radiuOne').attr('class');
        var eleAttr2 = $('#radiuTwo').attr('class');
        var isChecked = $(".squar input[type='checkbox']").is(':checked');
        if(direction == '0') { //正向订阅
            direction == 0;
        }else if(direction == '1'){ //反向订阅
            direction == 1;
        }
        status = 1;
        if(eleAttr1 == 'current' && isChecked || eleAttr2 == 'current' && isChecked) {
            $.ajax({
                url:  gotofllow,
                type: 'post',
                data: {'analystid':userId,'analystname':analyst_username,'status':status,'direction':direction},
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                dataType:'json',
                success: function(res){
                    if(res.status == 0){
                        //订阅失败
                        msg('订阅失败');
                        window.setTimeout(window.location.reload(),2000);
                    }else if(res.status == 2){
                        //用户未登录
                        msg('请先登录');
                        setTimeout(function(){
                            window.location.href = gotologin;
                        },2000)
                    }else if(res.status == 3){
                        //用户未登录
                        showTips();
                        $('.l_tips').html('订阅已达上限');
                        window.setTimeout(window.location.reload(),2000);
                    }else if(res.status == 4){ // 未充值提示去PC端充值
                        showTips();
                        $('.l_tips').html('请去PC端充值');
                        window.setTimeout(window.location.reload(),2000);
                    }else{
                        //订阅成功
                        msg('订阅成功');
                        window.setTimeout(window.location.reload(),2000);
                    }
                }
            });
            $('.follow_btn').hide();
        }else if(eleAttr1 == '' && eleAttr2 == '' && !isChecked) {
            msg('选择方向和协议');
            return false;
        }else if(eleAttr1 == 'current'  && !isChecked || eleAttr2 == 'current' && !isChecked) {
            msg('选择协议');
            return false;
        }else {
            msg('选择方向');
            return false;
        }
    }
    //取消订阅
    function follow(status,direction,obj){
        var isChecked = $(".squar input[type='checkbox']").is(':checked');
        if(!isChecked) {
           msg('请勾选协议');
            $('.follow_btn').show();
        }else{
            $(obj).removeAttr('onclick');
            $.ajax({
                url:gotofllow,
                type: 'post',
                data: {'analystid':userId,'analystname':analyst_username,'status':status,'direction':direction},
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                dataType:'json',
                success: function(res){
                    if(res.status == 0){
                        //订阅失败
                        msg('订阅失败');
                        window.location.reload();
                    }else if(res.status == 2){
                        //用户未登录
                        msg('请先登录');
                        setTimeout(function(){
                            window.location.href = gotologin;
                        },2000)
                    }else if(res.status == 3){
                        //用户未登录
                        msg('订阅已达上限');
                        window.setTimeout(window.location.reload(),2000);
                    }else{
                        //订阅成功
                       msg('操作成功');
                        window.location.reload();
                    }
                }
            });
        }
    }

    //选择正向、反向订阅
    var myAttr;
    $(function() {
        $('.follow_btn .bor span').click(function() {
            $(this).attr({'class':'current'}).parent('div').parent('div').siblings().find('span').attr({'class':''});
            direction = $(this).attr({'class':'current'}).attr('myAttr');
        })
    })
</script>

<style>
    body #follow_btn_cancel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        margin: auto;
    }
    body .follow_btn {
        width: 11.53518124rem;
        height: 8.20895522rem;
        background-color: #fff;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border-radius: 0.554371rem;
        display: none;
        color: #000000;
        z-index: 999;
    }
    body .follow_btn span.current {
        background-color: #3B9CE0;
    }
    body .follow_btn div:nth-child(1) {
        display:-webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        font-size: 0.7249467rem;
        font-weight: bold;
        line-height: 2.55863539rem;
    }
    body .follow_btn div:nth-child(1) div.bor {
        width: 0.74626866rem;
        height: 0.74626866rem;
        border-radius: 50%;
        border: 0.02132196rem solid #0f0f0f;
        margin: 0.93816631rem 0.95948827rem 0 2.6652452rem;
    }
    body .follow_btn div:nth-child(1) div.bor span {
        display: block;
        width: 0.61833689rem;
        height: 0.61833689rem;
        border-radius: 50%;
        margin: auto;
    }
    body .follow_btn div:nth-child(2) {
        width: 8.76332623rem;
        height: 0.04264392rem;
        background-color: #CDCED2;
        margin: 0 auto;
    }
    body .follow_btn div:nth-child(3) {
        display:-webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        font-size: 0.7249467rem;
        font-weight: bold;
        height: 2.55863539rem;
        line-height: 2.55863539rem;
    }
    body .follow_btn div:nth-child(3) div.bor {
        width: 0.74626866rem;
        height: 0.74626866rem;
        border-radius: 50%;
        border: 0.02132196rem solid #0f0f0f;
        margin: 0.93816631rem 0.95948827rem 0 2.6652452rem;
    }
    body .follow_btn div:nth-child(3) div.bor span {
        display: block;
        width: 0.61833689rem;
        height: 0.61833689rem;
        border-radius: 50%;
        margin: auto;
    }
    body .follow_btn div:nth-child(4) {
        display:-webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        margin-top: 0.21321962rem;
    }
    body .follow_btn div:nth-child(4) div.squar {
        width: 0.51172708rem;
        position: relative;
        margin: 0.10660981rem 0.36247335rem 0.42643923rem 1.66311301rem;
    }
    body .follow_btn div:nth-child(4) div.squar label {
        width: 0.51172708rem;
        height: 0.51172708rem;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        border: 0.02132196rem solid #3b9ce0;
    }
    body .follow_btn div:nth-child(4) div.squar label span {
        display: block;
        width: 0.31982942rem;
        height: 0.21321962rem;
        position: absolute;
        border: 0.10660981rem solid #333333;
        border-top: none;
        border-right: none;
        background: transparent;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        -o-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    body .follow_btn div:nth-child(4) div.squar input[type=checkbox] {
        visibility: hidden;
    }
    body .follow_btn div:nth-child(4) div.squar input[type=checkbox]:checked + label span {
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1;
    }
    body .follow_btn div:nth-child(4) span {
        color: #191919;
        font-size: 0.554371rem;
    }
    body .follow_btn div:nth-child(4) span a {
        color: #3B9CE0;
        font-size: 0.554371rem;
    }
    body .follow_btn div:nth-child(5) {
        height: 1.87633262rem;
        line-height: 1.87633262rem;
        display:-webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        border-top: 0.04264392rem solid #cdced2;
        background-color: #fff;
        border-bottom-right-radius: 0.554371rem;
        border-bottom-left-radius: 0.554371rem;
    }
    body .follow_btn div:nth-child(5) span {
        flex: 1;
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        text-align: center;
        font-size: 0.68230277rem;
        color: #3B9CE0;
        font-weight: normal;
    }
    body .follow_btn div:nth-child(5) span:nth-child(1) {
        border-right: 0.02132196rem solid #cdced2;
    }
    body .cancel_follow {
        width: 11.53518124rem;
        height: 1.79104478rem;
        background-color: #fff;
        border-radius: 0.40511727rem;
        text-align: center;
        line-height: 1.79104478rem;
        font-size: 0.68230277rem;
        color: #3B9CE0;
        margin-top: 0.44776119rem;
        font-weight: normal;
    }
</style>
